<template>
	<view class="page-wrap" :data-theme="theme" :style="globalColor.style">
		<header-custom title="个人信息" />
		<view class="container">
			<view class="form">
				<view class="content avatar-box fboxRow Xcenter">
					<view class="avatar-inner fboxCol Ycenter Xcenter" v-if="formObj.avatar">
						<text class="del bksCIcon bks-c-ziyuan183shanchu color-fff font36" @click="delAvatar"></text>
						<image class="avatar" @click="previewImg" :src="formObj.avatar" mode="aspectFill"></image>
					</view>
					<view class="avatar-inner avatar-default fboxCol Ycenter Xcenter" v-else @click="btnUploadFile">
						<text class="bksCIcon bks-c-ziyuan46weidenglu color-E6E6EB" style="font-size: 96rpx" />
						<view class="headimg-icon fboxRow Xcenter Ycenter">
							<text class="bksCIcon bks-c-ziyuan153touxiang color-fff font16"></text>
						</view>
					</view>
				</view>
				<view class="label color-36363A font28">昵称</view>
				<view class="content font24">
					<input placeholder="请输入" placeholder-class="color-9899A1" :value="formObj.nickName" name="nickName" maxlength="13" />
				</view>
				<view class="label color-36363A font28">标签</view>
				<view class="content font24" @click="onPickerShow">
					<!--  -->
					<!-- <picker @change="bindPickerChange" :value="tagIndex" :range="tagList" @change=""> -->
						<text v-if="formObj.tagName">{{formObj.tagName}}</text>
						<text v-else class="color-9899A1">请选择您的身份标签</text>
						<!-- <view class="uni-input">{{formObj.tagName ? tagList[tagIndex] : '请选择您的身份标签'}}</view> -->
					<!-- </picker> -->
				</view>
				<view class="label color-36363A font28">简介</view>
				<view class="content font24">
					<textarea class="uni-text flex1 font24" v-if="!pickerShow" placeholder="请输入" placeholder-class="color-9899A1"
						v-model="formObj.intro" name="intro" maxlength="50" />
					<view class="fboxRow Ycenter Xend color-9899A1">{{formObj.intro ? formObj.intro.length : 0}}/50</view>
				</view>
				<!-- <view class="label color-36363A font28">主页图片</view>
		  <view class="content noborder">
			<van-uploader name="homeImg" previewImageClass="homeImg-perview" preview-size="320rpx"
			  file-list="{{ homeImgList }}" max-count="1" bind:after-read="afterRead" bind:delete="onDelete">
			  <view class="homeImg fboxRow Xcenter Ycenter">
				<text class="bksCIcon bks-c-ziyuan63guanzhu color-C8C8CC" style="font-size: 80rpx;" />
			  </view>
			</van-uploader>
		  </view> -->
			</view>
			<view class="btn-group">
				<button class="btn font30" @click="formSubmit">保存</button>
			</view>
			<u-picker :show="pickerShow" :columns="tagList" keyName="tagName" title="选择标签" @close="onCancel" @cancel="onCancel" @confirm="onConfirm"></u-picker>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		memberTags,
		uploadAvatar,
		infoDetail,
		infoEdit
	} from '@/api/bks.mine'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				memberTags: [],
				pickerShow: false,
				tagIndex: 0,
				tagList: [], // 标签picker数据
				formObj: {}
			}
		},
		onLoad: function(options) {
			this.init()
			this.getMemberTags()
		},
		methods: {
			// 数据回显初始化
			init() {
				infoDetail().then(res => {
					this.formObj = res.data
				})
			},
			// 获取标签列表
			getMemberTags() {
				memberTags().then(res => {
					this.tagList =[ res.data ]
				}).catch(e => {
					console.log(e)
				})
			},
			onPickerShow() {
				this.tagList[0].filter((item,index)=>{
					if(item.tagName == this.formObj.tagName){
						this.tagIndex = index
					}
				})
				this.pickerShow = true
			},
			onCancel() {
				this.pickerShow = false
			},
			onConfirm(e) {
				console.log(e)
				this.tagIndex = e.indexs[0]
				this.formObj.tagId = e.value[0].tagId
				this.formObj.tagName = e.value[0].tagName
				this.pickerShow = false
			},
			formSubmit(e) {
				infoEdit(this.formObj).then(res => {
					if(res.data){
						uni.showToast({
							title: '保存成功',
							icon: 'none',
							duration: 2000,
							success() {
								uni.navigateBack()
							}
						})
					}
				})
			},
			btnUploadFile(){
				// #ifdef H5
				const {bw_link} = getApp().getBWData(['bw_link'])
				if(bw_link.isApp){
					let u = navigator.userAgent;
					if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
						try{
							const data = { type: 'fileUpload', action: 'contentImg' };
							window.android.recruitHandler(JSON.stringify(data))
						}catch(err){
							console.log(err)
						}
					}else{
						this.uploadFile()
					}
				}else{
					this.uploadFile()
				}
				// #endif
				// #ifdef MP
					this.uploadFile()
				// #endif
			},
			uploadFile(){
				uni.chooseFile({
					count:1,
					extension: ['.png', '.jpg'],
					success: (resFile) => {
						console.log(resFile)
						const file = resFile.tempFiles[0]
						uploadAvatar(file).then(res => {
							// 上传完成需要更新 fileList
							if(res.data){
								this.formObj.avatar = res.data
							}
						})
					},fail(err) {
					}
				})
			},
			appFileCallback(resFile){
				this.formObj.avatar = resFile.fileUrl
			},
			delAvatar(){
				this.formObj.avatar = ''
			},
			previewImg() {
			  uni.previewImage({
				current: 0,
				urls: [this.formObj.avatar]
			  });
			}
		}
	};
</script>

<style scoped lang="scss">
/* pages/mine/user/index.wxss */
.container {
  padding-top: 68rpx;
  padding-bottom: 60rpx;
}

.container .form {
  padding: 0 30rpx;
}

.container .label {
  margin-bottom: 40rpx;
}

.container .content {
  position: relative;
  padding-bottom: 16rpx;
  margin-bottom: 55rpx;
  border-bottom: 1px solid #F0F0F5;
}
.uni-text{width: 100%;height: 80rpx;}
.container .content.avatar-box{border-bottom: 0;}
.avatar-inner{width: 131rpx;height: 131rpx;background: #F5F5FA;border-radius: 50%;position: relative;}
.avatar-inner .avatar{width: 131rpx; height: 131rpx;border: 3rpx solid #E6E6EB;border-radius: 50%;}
  
.avatar-inner .del{width: 36rpx;height: 36rpx;color: #333;border-radius: 50%;position: absolute;top: 0;right: 0;z-index: 3;}
.avatar-default .headimg-icon{width: 36rpx;height: 36rpx;background: #C7C8D4;border-radius: 50%;position: absolute;bottom: 0;right: 0;}


.container .btn-group {
  padding: 0 30rpx;
}

.container .btn {
  width: 100%;
  height: 84rpx;
  line-height: 84rpx;
  background: linear-gradient(-90deg, #00B356 0%, #79DBA8 100%);
  border-radius: 8rpx;
  font-size: 30rpx;
  color: #FFFFFF;
}
</style>